<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>涛宝商城-订单确认</title>
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/order_affirm/common.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/order_affirm/confirm.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/order_affirm/style.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/mdui.min.css}" />
		<script th:src="@{appstyle/js/order_affirm/jquery.js}" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" th:src="@{appstyle/js/mdui.min.js}"></script>
	</head>
	<body>
		<style>
			body {
				min-width: 1080px;
				background-color: #f6f6f6;
			}

			#header {
				height: 68px;
				border: 1px solid #66CCFF;
				background-color: #66CCFF;
			}

			.login {
				background-color: darkgray;
				padding-bottom: 5px;
				padding-top: 3px;
				background-color: #EEEEEE;
			}

			.login_1 {
				width: 1080px;
				position: relative;
				border: 1px solid #EEEEEE;
				margin: 0 auto;
			}

			.span1 {
				cursor: pointer;
				font-size: 12px;
				color: #999;
				text-decoration: none;
			}

			.ul1 {
				overflow: hidden;
			}

			.span {
				position: absolute;
				left: 0;
			}

			.span1:hover {
				color: #66CCFF;
			}

			li {
				list-style: none;
			}

			.li1 {
				float: left;
				/*display: flex;*/
				/*justify-content: center;*/
				position: relative;
				left: 74%;
				margin-left: 15px;
			}

			a {
				font-size: 12px;
				color: #999;
			}

			.a1 {
				text-decoration: none;
			}

			.a1:hover {
				color: red;
			}

			.p1 {
				text-align: center;
				margin-top: 20px;
				color: white;
				font-size: 20px;
				font-weight: bold;
			}

			#body {
				width: 1080px;
				height: 111px;
				margin: 0 auto;
				position: relative;
			}

			* {
				margin: 0;
				padding: 0;
			}

			.logo {
				width: 150px;
				font-size: 35px;
				font-weight: bold;
				display: block;
				color: #66CCFF;
				text-decoration: none;
				position: absolute;
				left: 60px;
				top: 35px;
			}

			.textinput {
				width: 550px;
				padding: 10px;
				border: 2px solid #66CCFF;
				font-size: 15px;
				outline: none;
			}

			.button1 {
				width: 80px;
				height: 42px;
				border: none;
				background-color: #66CCFF;
				font-size: 17px;
				font-weight: 700;
				color: #fff;
				outline: none;
				position: relative;
				right: 5px;
				top: 1px;
				text-align: center;
			}

			#body-1 {
				position: absolute;
				right: 171px;
				top: 36px;
			}

			hr {
				border-top: 2px solid #66CCFF;
			}

			#daohanglan {
				position: relative;
				background-color: #EEEEEE;
				margin-bottom: 10px;
			}

			.daohanglan_1 {
				width: 1080px;
				margin: 0 auto;
				display: block;
			}

			.a3 {
				color: #888;
				text-decoration: none;
				cursor: pointer;
				font-size: 14px;
				line-height: 50px;
			}

			.a3:hover {
				color: #66CCFF;
			}

			.fuhao {
				color: #888;
			}

			#shopcar {
				width: 1080px;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
				border: 1px solid #66CCFF;
			}

			table {
				width: 100%;
				border-collapse: collapse;
				border: 1px solid #ebebeb;
				/*margin-bottom: 10px;*/
			}

			#toubu {
				background-color: #eee;
			}

			tr {
				font-size: 12px;
			}

			.th1 {
				width: 130px;
				text-align: left;
				padding-left: 20px;
			}

			.th2 {
				width: 400px;
				text-align: left;
			}

			.th3 {
				width: 100px;
				text-align: center;
			}

			.th4 {
				width: 200px;
				text-align: center;
			}

			.th5 {
				width: 100px;
				text-align: center;
			}

			.th6 {
				width: 110px;
				text-align: center;
			}
		</style>
		<div id="header">
			<p class="p1">涛宝商城,只有想不到,没有买不到!!!</p>
		</div>
		<div id="header_1">
			<div class="login">
				<div class="login_1">
							<input type="hidden" th:value="${session?.currentUser?.id}" id="userId" />
				<span class="span"> <a href="Land.html" class="span1" th:if="${session.currentUser==null}">登录</a>
				<div class="mdui-container"
						style="display: inline-block; position: absolute; top: -5px"
						th:if="${session.currentUser!=null}">
						<div class="mdui-chip">
							<img class="mdui-chip-icon"
								th:src="@{${session?.currentUser?.headpic}}" /> <span
								class="mdui-chip-title"
								th:text="${session?.currentUser?.username}"></span> <span
								class="mdui-chip-title"><i
								class="mdui-icon material-icons"
								mdui-tooltip="{content: '安全退出'}" onclick="clickLogout()">&#xe5cd;</i></span>
						</div>
					</div>
					<a href="register.html" class="span1" th:if="${session.currentUser==null}">注册</span>
				<ul class="ul1">
					<li class="li1"><a href="Shopping_Cart.html" class="a1">购物车(<span
							class="number">0</span>)
					</a></li>
					<li class="li1"><a href="orderMsg.html" class="a1">我的订单</a></li>
					<li class="li1"><a href="userMsg.html" class="a1">我的涛宝</a></li>
					<li class="li1"><a href="taobaostoreMsg.html" class="a1">关于涛宝</a></li>
				</ul>
			</div>
			</div>
			<hr />
			<div class="crumb" style="border: #66CCFF;">
				<div class="w" style="border: #66CCFF;">
					<div class="crumb-list" style="border: #66CCFF;">
						<a href="index.html" class="crumb-item">涛宝商城</a>
						<span>&gt;</span>
						<span class="crumb-item">订单确认</span>
					</div>
				</div>
			</div>
			<!-- 新增商品 -->
			<div class="modal mask close" id="insertPanel" style="display: none">
				<div class="modal-container">
					<div class="modal-header">
						<h1>使用新地址</h1> <i class="fa fa-close close" onclick=""></i>
					</div>
					<div class="modal-body">
						<div class="form">
							<div class="form-line"> <label class="label"><span class="form-require">*</span>收件人姓名:</label> <input class="form-item name"
								 id="receiver-name" type="text" placeholder="请输入收件人姓名" value=""> </div>
							<div class="form-line"> <label class="label"><span class="form-require">*</span>所在城市:</label> <select class="form-item province-select"
								 id="receiver-province">
									<option value="">请选择</option>
									<option value="北京">北京</option>
									<option value="上海">上海</option>
									<option value="天津">天津</option>
									<option value="重庆">重庆</option>
									<option value="河北省">河北省</option>
									<option value="山西省">山西省</option>
									<option value="辽宁省">辽宁省</option>
									<option value="吉林省">吉林省</option>
									<option value="黑龙江省">黑龙江省</option>
									<option value="江苏省">江苏省</option>
									<option value="浙江省">浙江省</option>
									<option value="安徽省">安徽省</option>
									<option value="福建省">福建省</option>
									<option value="江西省">江西省</option>
									<option value="山东省">山东省</option>
									<option value="河南省">河南省</option>
									<option value="湖北省">湖北省</option>
									<option value="湖南省">湖南省</option>
									<option value="广东省">广东省</option>
									<option value="海南省">海南省</option>
									<option value="四川省">四川省</option>
									<option value="贵州省">贵州省</option>
									<option value="云南省">云南省</option>
									<option value="陕西省">陕西省</option>
									<option value="甘肃省">甘肃省</option>
									<option value="青海省">青海省</option>
									<option value="内蒙古">内蒙古</option>
									<option value="广西">广西</option>
									<option value="西藏">西藏</option>
									<option value="宁夏">宁夏</option>
									<option value="新疆">新疆</option>
									<option value="香港">香港</option>
									<option value="澳门">澳门</option>
									<option value="台湾">台湾</option>
								</select> <select class="form-item city-select" id="receiver-city">
									<option value="0">请选择</option>
									
								</select> </div>
								<script>
								var r = {
										data: {
											"北京": ["北京"],
											"上海": ["上海"],
											"天津": ["天津"],
											"重庆": ["重庆"],
											"河北省": ["石家庄", "张家口", "承德", "秦皇岛", "唐山", "廊坊", "保定", "沧州", "衡水", "邢台", "邯郸"],
											"山西省": ["太原", "大同", "朔州", "阳泉", "长治", "晋城", "忻州", "吕梁", "晋中", "临汾", "运城"],
											"辽宁省": ["沈阳", "朝阳", "阜新", "铁岭", "抚顺", "本溪", "辽阳", "鞍山", "丹东", "大连", "营口", "盘锦", "锦州", "葫芦岛"],
											"吉林省": ["长春", "白城", "松原", "吉林", "四平", "辽源", "通化", "白山", "延边"],
											"黑龙江省": ["哈尔滨", "齐齐哈尔", "黑河", "大庆", "伊春", "鹤岗", "佳木斯", "双鸭山", "七台河", "鸡西", "牡丹江", "绥化", "大兴安"],
											"江苏省": ["南京", "徐州", "连云港", "宿迁", "淮阴", "盐城", "扬州", "泰州", "南通", "镇江", "常州", "无锡", "苏州"],
											"浙江省": ["杭州", "湖州", "嘉兴", "舟山", "宁波", "绍兴", "金华", "台州", "温州", "丽水"],
											"安徽省": ["合肥", "宿州", "淮北", "阜阳", "蚌埠", "淮南", "滁州", "马鞍山", "芜湖", "铜陵", "安庆", "黄山", "六安", "巢湖", "池州", "宣城"],
											"福建省": ["福州", "南平", "三明", "莆田", "泉州", "厦门", "漳州", "龙岩", "宁德"],
											"江西省": ["南昌", "九江", "景德镇", "鹰潭", "新余", "萍乡", "赣州", "上饶", "抚州", "宜春", "吉安"],
											"山东省": ["济南", "聊城", "德州", "东营", "淄博", "潍坊", "烟台", "威海", "青岛", "日照", "临沂", "枣庄", "济宁", "泰安", "莱芜", "滨州", "菏泽"],
											"河南省": ["郑州", "三门峡", "洛阳", "焦作", "新乡", "鹤壁", "安阳", "濮阳", "开封", "商丘", "许昌", "漯河", "平顶山", "南阳", "信阳", "周口", "驻马店"],
											"湖北省": ["武汉", "十堰", "襄攀", "荆门", "孝感", "黄冈", "鄂州", "黄石", "咸宁", "荆州", "宜昌", "恩施", "襄樊"],
											"湖南省": ["长沙", "张家界", "常德", "益阳", "岳阳", "株洲", "湘潭", "衡阳", "郴州", "永州", "邵阳", "怀化", "娄底", "湘西"],
											"广东省": ["广州", "清远", "韶关", "河源", "梅州", "潮州", "汕头", "揭阳", "汕尾", "惠州", "东莞", "深圳", "珠海", "江门", "佛山", "肇庆", "云浮",
												"阳江", "茂名", "湛江"
											],
											"海南省": ["海口", "三亚"],
											"四川省": ["成都", "广元", "绵阳", "德阳", "南充", "广安", "遂宁", "内江", "乐山", "自贡", "泸州", "宜宾", "攀枝花", "巴中", "达川", "资阳", "眉山",
												"雅安", "阿坝", "甘孜", "凉山"
											],
											"贵州省": ["贵阳", "六盘水", "遵义", "毕节", "铜仁", "安顺", "黔东南", "黔南", "黔西南"],
											"云南省": ["昆明", "曲靖", "玉溪", "丽江", "昭通", "思茅", "临沧", "保山", "德宏", "怒江", "迪庆", "大理", "楚雄", "红河", "文山", "西双版纳"],
											"陕西省": ["西安", "延安", "铜川", "渭南", "咸阳", "宝鸡", "汉中", "榆林", "商洛", "安康"],
											"甘肃省": ["兰州", "嘉峪关", "金昌", "白银", "天水", "酒泉", "张掖", "武威", "庆阳", "平凉", "定西", "陇南", "临夏", "甘南"],
											"青海省": ["西宁", "海东", "西宁", "海北", "海南", "黄南", "果洛", "玉树", "海西"],
											"内蒙古": ["呼和浩特", "包头", "乌海", "赤峰", "呼伦贝尔盟", "兴安盟", "哲里木盟", "锡林郭勒盟", "乌兰察布盟", "鄂尔多斯", "巴彦淖尔盟", "阿拉善盟"],
											"广西": ["南宁", "桂林", "柳州", "梧州", "贵港", "玉林", "钦州", "北海", "防城港", "南宁", "百色", "河池", "柳州", "贺州"],
											"西藏": ["拉萨", "那曲", "昌都", "林芝", "山南", "日喀则", "阿里"],
											"宁夏": ["银川", "石嘴山", "吴忠", "固原"],
											"新疆": ["乌鲁木齐", "克拉玛依", "喀什", "阿克苏", "和田", "吐鲁番", "哈密", "博尔塔拉", "昌吉", "巴音郭楞", "伊犁", "塔城", "阿勒泰"],
											"香港": ["香港"],
											"澳门": ["澳门"],
											"台湾": ["台北", "台南", "其他"]
										},
										getProvinces: function() {
											var t = [];
											for (var e in this.data) t.push(e);
											return t
										},
										getCities: function(t) {
											return this.data[t]
										}
									};
								  $("#receiver-province").click(function(){
									  $("#receiver-city").empty();
									  $("#receiver-city").append("<option value='0'>请选择</option>");
									  for(var i=0;i<r.getCities($(this).val()).length;i++){
										  $("#receiver-city").append("<option value='"+r.getCities($(this).val())[i]+"'>"+r.getCities($(this).val())[i]+"</option>");
									  }
								  })
								</script>
							<div class="form-line"> <label class="label"><span class="form-require">*</span>详细地址:</label> <input class="form-item"
								 id="receiver-address" type="text" placeholder="请精确到门牌号" value=""> </div>
							<div class="form-line"> <label class="label"><span class="form-require">*</span>收件人手机号:</label> <input class="form-item"
								 id="receiver-phone" type="text" placeholder="请输入11位手机号" value=""> </div>
							<div class="form-line"> <label class="label">邮政编码:</label> <input class="form-item" id="receiver-zip" type="text"
								 placeholder="如：100000" value=""> </div>
							<div class="form-line"> <input type="hidden" id="receiver-id" value=""> <a class="btn form-btn" onclick="save_retrieve()">保存收货地址</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="confirm-wrap w">
				<div class="panel">
					<h2 class="panel-title">收货地址</h2>
					<div class="panel-body address-list" id="addresss">
						<a class="address-item" data-id="4784">
							<div class="address-title"> <span class="city">北京市 北京市</span> <span class="name">（ sda1 收 ）</span> </div>
							<div class="address-detail"> sadsa1 1300000000 </div>
							<div class="address-opera"> <span class="link address-update">编辑</span> <span class="link address-delete">删除</span>
							</div>
						</a>
						<a class="address-item" data-id="4803">
							<div class="address-title"> <span class="city">长治 山西省</span> <span class="name">（ 学生 收 ）</span> </div>
							<div class="address-detail"> 南油5区 12345678915 </div>
							<div class="address-opera"> <span class="link address-update">编辑</span> <span class="link address-delete">删除</span>
							</div>
						</a>
						<div class="address-item add" id="addAddress">
							<div class="address-new"><i class="fa fa-plus"></i>
								<div class="text">使用新地址</div>
							</div>
						</div>
					</div>
				</div>
				<div class="panel">
					<h2 class="panel-title">商品清单</h2>
					<div class="panel-body order-product">
						<table class="product-table" data-product-id="" data-checked="">
							<tbody>
								<tr id="order-product-first">
									<th width="10%">&nbsp;</th>
									<th width="30%" align="left">商品描述</th>
									<th width="20%" align="center">价格</th>
									<th width="20%" align="center">数量</th>
									<th width="20%" align="center">小计</th>
								</tr>
								
							</tbody>
						</table>
						<script>
						initProductList();
						function initProductList(){
							$.ajax({
								url:"order/listCartProductVo.do",
								type:"post",
								dataType:"json",
								success:function(data){
									for(var i=0;i<data.data.cartProductVoList.length;i++){
										var obj = data.data.cartProductVoList[i];
										$("#order-product-first").after("<tr><td class='product-cell cell-img'> <a href='' target='_blank'><img class='p-img' src='"+obj.productMainImage+"' alt='"+obj.productName+"'></a></td><td align='left'> <a class='link p-name' href='' target='_blank'>"+obj.productName+"</a></td><td align='center'>"+obj.productPrice+"</td><td align='center'>"+obj.quantity+"</td><td align='center'>"+obj.productTotalPrice+"</td></tr>");
									}
									$(".submit-total").text("￥"+data.data.cartTotalPrice);
								}
							})
						}
						</script>
						<div class="submit-con"> <span>订单总价：</span> <span class="submit-total">￥3026</span> <span class="btn order-submit" id="submit_order">提交订单</span>
						</div>
						<script type="text/javascript">
						$("#insertPanel").hide();
						initaddress();// 初始化用户地址信息
						function initaddress(){
							$.ajax({
								url:"receiver/list.do",
								Type:"post",
								dataType:"json",
								async:false,
								success:function(data){
									console.log(data);
									$("#addresss").empty();
									for(var i=0;i<data.data.list.length;i++){
										var item = data.data.list[i];
										$("#addresss").append("<a class='address-item' data-id='"+item.id+"'><div class='address-title'> <span class='city'>"+item.receiverProvince+" "+item.receiverCity+"</span> <span class='name'>（ "+item.receiverName+"）</span> </div><div class='address-detail'> "+item.receiverAddress+" "+item.recelverPhone+" </div><div class='address-opera'><span class='link address-update'>编辑</span><span class='link address-delete'>删除</span></div></a>");
									}
									$("#addresss").append("<div class='address-item add' id='addAddress'><div class='address-new'> <i class='fa fa-plus'></i><div class='text'>使用新地址</div></div></div>");
								}
							})
						}
						</script>
						<script type="text/javascript">
						    // 新增面板
						    save_retrieve = function() {
						        $.ajax({
						        	url:"receiver/add.do",
						        	Type:"post",
						        	async:false,
						        	data:{
						        		receiverName:$("#receiver-name").val(),
						        		recelverPhone:$("#receiver-phone").val(),
						        		receiverMobile:$("#receiver-phone").val(),
						        		receiverProvince:$("#receiver-province").val(),
						        		receiverCity:$("#receiver-city").val(),
						        		receiverAddress:$("#receiver-address").val(),
						        		receiverZip:$("#receiver-zip").val(),
						        	},
						        	dataType:"json",
						        	success:function(data){
						        		$("#insertPanel").hide();
						        		location.reload();
						        	}
						        })
							}
						    // 删除地址
						    delete_retrieve=function(id){
						    	$.ajax({
						    		url:"receiver/delete.do",
						    		Type:"post",
						    		data:"receiverId="+id,
						    		dataType:"json",
						    		success:function(data){
						    			location.reload();
						    		}
						    	})
						    }
							$(".fa-close").click(function(){
								$("#insertPanel").hide();
							})
							$("#addAddress").click(function(){
								$("#insertPanel").show();
							})
						</script>
						<script type="text/javascript">
						    var receiver_data_id = 0;
							// 点击变色
							$(".address-list").find("a").click(function(){
								$(this).attr("class", "address-item active");
								$(this).parent().find("a").not(this).attr("class", "address-item");
								receiver_data_id = $(this).attr("data-id");
							})
							
							$(".address-delete").click(function(){
								delete_retrieve($(this).parents("a").attr("data-id"));
							})
							// 提交订单(生成订单)
						    $("#submit_order").click(function(){
							   if(receiver_data_id != 0){
								   $.ajax({
									   url:"order/create.do",
									   Type:"post",
									   data:"receiverId="+receiver_data_id,
									   dataType:"json",
									   success:function(data){
										   location.href="orderMsg.html";
									   }
								   })   
							   }else{
								   mdui.alert("请选择一个正确的收货地址!!!");
							   }
						    })
						</script>
					</div>
				</div>
			</div>
	</body>
</html>
